<extend name="mobile/template/mobile" />

<block name="area_header">
    <title>{:C('PLATFORM_NAME')}</title>
    <style type="text/css">
        body {
            background-color: #f9f9f9;
        }
        .register_form div{
            position: relative;
            margin-bottom: 5px;
            margin-top: 5px;
        }
        .register_form input{ height: 50px; width: 350px;}
        .tip{font-size: 12px; color: darkgray; padding-left: 5px;}

        .register_form .btn-code{

            position: absolute;
            top: 7px;
            right: 20px;
        }
        .banma-logo{
            background: url(__PUBLIC__/Common/img/banma_logo180x180.png);
            width: 180px;
            height: 180px;
            display: block;
            margin: 0 auto;
            border-radius: 50%;
            margin-bottom: 15px;
        }
       </style>

</block>

<block name="area_body">

    <header data-am-widget="header"
            class="am-header am-header-default">
        <div class="am-header-left am-header-nav">
            <a href="#" class="">
                <i class="am-header-icon am-icon-home"></i>
            </a>
        </div>

        <h1 class="am-header-title">
            <a href="#title-link" class="">
                {:C('PLATFORM_NAME')}-注册
            </a>
        </h1>

    </header>

    <div class="am-padding-sm">
        <div class="banma-logo"></div>
        <div class="am-alert  am-alert-secondary"><span class="am-text-danger">{$userinfo['nickname']}</span>邀请您注册{:C('PLATFORM_NAME')}账户</div>
        <form class="register_form" id="fm" action="" method="post">

            <fieldset class="am-form-set">
                <div class="js_mobile">
                    <input type="text"  class="am-form-field "  name="mobile" id="phone" placeholder="手机号码">
                </div>
                <div>
                    <input type="text"  class="am-form-field js_code"  name="code"  placeholder="请输入手机验证码">
                    <a target-form="js_mobile" href="{:U('Shop/Index/getCode')}" data-no-refresh="1" data-loading-text="正在发送...." class=" btn-code no-refresh ajax-post am-btn am-btn-primary am-btn-sm">获取验证码<span class="j_count"></span></a>

                </div>
                <div>
                    <input  class="am-form-field"  type="password" name="pwd" id="pwd" placeholder="请输入密码">
                </div>
                <div >
                    <input class="am-form-field"  type="password" name="pwd_repeat" id="pwd_repeat" placeholder="请再次输入密码">
                </div>

                <div>
                    <input type="text"  value="{$userinfo['idcode']}" class="am-form-field" name="idcode" id="phone" placeholder="邀请人ID码(可不填)">&nbsp;

                </div>

                <div>
                    <button id="id" style="width: 90%; height: 40px;margin-left:5%;" url="{:U('Shop/Index/register')}" target-form="register_form"  class="ajax-post btn btn-primary am-btn am-btn-danger am-btn-block" autofocus="autofocus">注册</button>
                </div>

                <div class="am-text-center">
                    点击注册即表示同意接受<a target="_blank" href="{:U('Shop/Index/xieyi')}">斑马协议和隐私策略</a>
                </div>
            </fieldset>
        </form>
    </div>

    <script type="text/javascript">
        $(function(){

            var isMobile = /^1\d{10}$/;
            $('#phone').keyup(function() {
                if (!isMobile.test($(this).val())) {
                    $(this).parent().find("span").html("<span class='am-text-danger' ><i class='am-icon-times'></i>手机号码格式不正确！</span>");
                } else {
                    $(this).parent().find("span").html("<span class='am-text-success' ><i class='am-icon-check'></i>正确！</span>");
                }
            })
        })
    </script>

</block>